import {useState,useEffect} from 'react'
import {useWindowScroll,useLocalStorage} from '../utils/hook'

function Hooks() {
  const [count,setCount]=useState(0)
  const [list,setList]=useState([])
  const [name,setName]=useState('crazy dog')
  const [Y,setY]=useWindowScroll()
  const [username,setUsername]=useLocalStorage('username','fieemiracle')
  // useEffect(() => {
  //   document.title = `${count} times`;
  // },[count])//只有当改变count时，才会调用

  // useEffect(() => {
  //  console.log('useEffect start');
  // },[])

  // useEffect(() => {
  //  const timer=setInterval(()=>{
  //     setCount(count+1)
  //     console.log(count+1);
  //  },1000)

  //  return ()=>{//需要清除副作用
  //   // 清理副作用
  //   clearInterval(timer)
  //  }
  // },[count])
 
  useEffect(()=>{
    console.log('Top=',Y);
  },[Y])

  useEffect(()=>{
    console.log('username=',username);
  },[username])

  return (
    <div style={{height:'1000px'}}>
      <h3>{count}</h3>
      <button onClick={()=>setCount(count+1)}>click me</button>
      <h3>{list}</h3>
      <button onClick={()=>setList(['hello world'])}>click me</button>
      <h3>{name}</h3>
      <button onClick={()=>setName('cute cat')}>click me</button>
      <h3>{Y}</h3>
      <button onClick={()=>setUsername('周杰伦')}>click me</button>
    </div>
  )
}

export default Hooks;
